<template>
  <div class="components-container">
    <aside><strong>SplitPane</strong> If you've used
      <a href="https://codepen.io/" target="_blank"> codepen</a>,
      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
    </aside>
    <div class="wrap">
      <div id="left">sss</div>
      <div id="right">123</div>
    </div>
    <!--    <split-pane split="vertical" @resize="resize">-->
    <!--      <template slot="paneL" style="width:100%">-->
    <!--        <div class="left-container">left</div>-->
    <!--      </template>-->
    <!--      <template slot="paneR">-->
    <!--        <div class="top-container">top</div>-->
    <!--      </template>-->
    <!--      <template slot="paneL">-->
    <!--        <div class="left-container" >left</div>-->
    <!--      </template>-->
    <!--      <template slot="paneR">-->
    <!--        <split-pane split="horizontal">-->
    <!--          <template slot="paneL">-->
    <!--            <div class="top-container" >top</div>-->
    <!--          </template>-->
    <!--          <template slot="paneR">-->
    <!--            <div class="bottom-container" >bottom</div>-->
    <!--          </template>-->
    <!--        </split-pane>-->
    <!--      </template>-->
    <!--    </split-pane>-->
  </div>
</template>

<script>
import splitPane from 'vue-splitpane'

export default {
  name: 'SplitpaneDemo',
  components: { splitPane },
  methods: {
    resize() {
      console.log('resize')
    }
  }
}
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
  }

  .wrap {
    margin: 0 auto;
    width: 100%;
  }

  #left {
    width: 80%;
    height: 500px;
    background: #ccffff;
    float: left;
  }

  #right {
    width: 20%;
    height: 500px;
    background: #ffcccc;
    margin-left: 80%;
  }

  .left-container {
    background-color: #F38181;
    width: 100%;
    height: 100%;
  }

  .right-container {
    background-color: #FCE38A;
    height: 200px;
  }

  .top-container {
    background-color: #FCE38A;
    width: 20%;
    height: 100%;
  }

  .bottom-container {
    width: 100%;
    background-color: #95E1D3;
    height: 100%;
  }
</style>
